<template>
  <div >
    <el-tabs type="border-card" style="width:852px;">
        <el-tab-pane label="宝贝详情">
            <div style="display:flex;margin: 0 auto" >
                <div style="" >
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-size:30px;font-weight:800">产品参数</span>
                    </div>
                    <div class="text item">
                        <span style="font-weight:800">商品产地：</span>{{productPlace}}
                    </div>
                    <div class="text item">
                        <span style="font-weight:800">商品保质期：</span>{{footPeriod}}个月
                    </div>
                    <div class="text item">
                        <span style="font-weight:800">品牌名：</span>{{brand}}
                    </div>
                    <div class="text item">
                        <span style="font-weight:800">生产工厂，厂名：</span>{{factoryName}}
                    </div>
                    <div class="text item">
                        <span style="font-weight:800"> 生产工厂，厂址：</span>{{factoryAddress}}
                    </div >
                    <div class="text item">
                        <span style="font-weight:800"> 包装方式：</span>{{packagingMethod}}
                    </div >
                    <div class="text item">
                        <span style="font-weight:800"> 规格重量：</span>{{weight}}
                    </div >
                    <div class="text item">
                        <span style="font-weight:800"> 存储方式：</span>{{storageMethod}}
                    </div >
                    <div class="text item">
                        <span style="font-weight:800"> 食用方式：</span>{{eatMethod}}
                    </div >
                </el-card>
                </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="全部评价">
            <el-tabs  v-model="activeName">
                <el-tab-pane label="全部评价" name="first">
                    <goods-comment-box :comments="comments"></goods-comment-box>
                </el-tab-pane>
                <el-tab-pane label="好评" name="second">
                    <goods-comment-box :comments="goodComments"></goods-comment-box>
                </el-tab-pane>
                <el-tab-pane label="中评" name="third">
                    <goods-comment-box :comments="ordinaryComments"></goods-comment-box>
                </el-tab-pane>
                <el-tab-pane label="差评" name="fourth">
                    <goods-comment-box :comments="badComments"></goods-comment-box>
                </el-tab-pane>
            </el-tabs>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import http from '@/utils/request'
import GoodsCommentBox from '@/components/GoodsDetail/GoodsCommentBox.vue'
export default {
    components: {
        GoodsCommentBox
    },
    // props:['goodId'],
    data() {
        return {
            brand: '',
            createTime: '',
            eatMethod: '',
            factoryName: '',
            factoryAddress: '',
            footPeriod: '',
            packagingMethod: '',
            paramId: '',
            productId: '',
            productPlace: '',
            storageMethod: '',
            updateTime: '',
            weight: '',
            activeName: 'first',
            comments: '',
            goodComments: '',
            ordinaryComments: '',
            badComments: '',
            commId: ''
        }
    },
    mounted(){
        this.goodsId = this.$route.query.id
        this.getParamsByGoodId()
        this.getComment()
    },
    methods: {
        getParamsByGoodId() {
            http.get(`/par/${this.goodsId}`)
                .then(res => {
                    let param = res.data.data
                    this.brand = param.brand
                    this.createTime = param.createTime
                    this.eatMethod = param.eatMethod
                    this.factoryName = param.factoryName
                    this.footPeriod = param.footPeriod
                    this.packagingMethod = param.packagingMethod
                    this.paramId = param.paramId
                    this.productId = param.productId
                    this.productPlace = param.productPlace
                    this.storageMethod = param.storageMethod
                    this.updateTime = param.updateTime
                    this.weight = param.weight
                    this.factoryAddress = param.factoryAddress
                })
        },
        getComment() {
            http.get(`/com/${this.goodsId}`)
                .then(res => {
                    this.comments = res.data.data
                    this.commId = this.comments.id
                    window.console.log(this.comments)
                    this.goodComments = this.comments.filter(comment => comment.commType == 1)
                    this.ordinaryComments = this.comments.filter(comment => comment.commType == 0)
                    this.badComments = this.comments.filter((comment => comment.commType == -1))
                })
        }
    }
}
</script>

<style>

</style>